<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>储蓄卡</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link  th:href="@{/ksdH5/css/public/leftNav.css}" rel="stylesheet"/>
<link  th:href="@{/ksdH5/css/myCard/creditCard.css}" rel="stylesheet"/>
</head>
<body>
<!--头部-->
<div class="headerBox">
	<a href="javascript:void(0);" class="headerBox_left"><img th:src="@{/ksdH5/img/header_leftIcon.png}"></a>
	<!--关闭按钮-->
	<a href="javascript:void(0);" class="headerBox_leftClose"><img th:src="@{/ksdH5/img/login/closeBnt.png}"></a>
	<span>我的卡包</span>
	<a id="addLOGO" href="javascript:void(0);" class="headerBox_right"><img th:src="@{/ksdH5/img/header_rightIcon.png}"></a>
</div>
<div class="mui-content">
<div class="myCard_tabBox">
	<a th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/h5/card/creditCard'}">信用卡</a>
	<a href="javascript:void(0);" class="myCard_tabBox_active">储蓄卡</a>
</div>
<div id="cashCardDiv" class="cashCard_contBox" style="display: none">
	<div class="cashCard_contBox_cardBox">
		<div class="cashCard_contBox_cardBox_left">
			<img id="bankLogo" th:src="@{/ksdH5/img/zwt/myCard_cxkLogo.png}" />
		</div>
		<div class="cashCard_contBox_cardBox_right">
			<span id="bankName"></span>
			<em id="cashBankAccount"></em>
		</div>
	</div>
	<div class="cashCard_contBox_information">
		<div class="c_c_i_inpntBox">
			<span>持卡人</span>
			<em id="merchantName">杨**</em>
		</div>
		<div class="c_c_i_inpntBox">
			<span>身份证号</span>
			<em id="idcardNumber"></em>
		</div>
		<div class="c_c_i_inpntBox">
			<span>预留手机</span>
			<em id="bankPhone"></em>
		</div>
	</div>
	<a th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/h5/card/changeCashCard'}" class="cashCard_contBox_bnt" style="text-align: center;line-height: 0.8rem;">更换</a>
</div>
<!--暂无数据-->
<div class="planList_noData" style="display: none;">
	<div class="planList_noData_img">
		<img class="" th:src="@{/ksdH5/img/myCard_zwsj.png}" />
	</div>
	<div class="planList_noData_title">您还没有储蓄卡哦</div>
	<div class="planList_noData_cont">赶快点击右上角添加按钮，添加储蓄卡吧！</div>
</div>
</div>
<!--左侧导航-->
<!-- 引入导航页面 -->

<!-- ecr/html/includeNav:是子页面的文件路径 ；myNav：是子页面中被引用代码块的名称
（如th:fragment="myNav"） -->
<div th:replace="h5/ksdH5IncludeNav :: ksdH5Nav"  ></div>
<div class="huiseBox"></div>
<!--添加储蓄卡-->
<div class="addCreditCardBg" style="display: none;"></div>
<div class="addCreditCard" style="display: none;">
	<div class="makePlan_selectedCardBox_topBox">
		<span>添加储蓄卡</span>
		<a href="javascript:void(0);" class="makePlan_selectedCardBox_closeBnt"><img th:src="@{/ksdH5/img/login/closeBnt.png}"></a>
	</div>
	<div class="makePlan_selectedCardBox_listBox">
		<div class="m_s_l_inputBox">
			<span class="m_s_l_i_span" id="cash_mer_name"></span>
		</div>
		<div class="m_s_l_inputBox">
			<span class="m_s_l_i_span" id="cash_idcard_no"></span>
		</div>
		<div class="m_s_l_inputBox">
			<input class="m_s_l_inputBox_input" id="cash_bank_account" type="number" maxlength="25" placeholder="请输入储蓄卡号" />
		</div>
		<div class="m_s_l_inputBox">
			<input class="m_s_l_inputBox_input" type="tel"id="cash_bank_phone" placeholder="请输入预留手机" />
		</div>
		<div class="cashCard_tishi">
			<p>温馨提示:</p>
			<p>请绑定主流银行的一类储蓄卡，二类卡日交易限额1万元，可能会导致大额快捷无法到账!</p>
		</div>
		<div id="cash_confim_div" class="m_s_l_tishi" style="display: none">
			<label class="loginBox_contBox_tishi_left " id='m_s_l_tishi_bnt'>
				<input type="checkbox" id="cash_confim_box" class="loginBox_contBox_tishi_left_input" />确认信息无误直接提交
			</label>
		</div>
		<button class="m_s_l_bnt cashCard_bnt" onclick="addCashCard()">提交</button>
	</div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
</script>
 <script type="text/javascript">
 var  isActive = 0;
 var prefix = ctx +"h5";
    	$(function(){
    		//复选框点击方法
    		$('.loginBox_contBox_tishi_left').on('click',function(){
    				$('.loginBox_contBox_tishi_left').toggleClass("active");
    		});
    		//指定第四个菜单样式选中
    		$(".leftNavContBox_contBox li").eq(4).find("a").addClass('leftNavContBox_contBox_bnt_active');
    		//查询用户信息
    		 $.ajax({
					url : ctx+ "h5/merInfo",
					type : "POST",
					success : function(re) {
					if (re.status == "SUCCESS") {
						var merchant = re.merchant;
						if(merchant.idCardNumber==null || merchant.idCardNumber==""){
							mui.toast("您还未实名认证,正在跳转实名认证页面",{ duration:'long'});
							setTimeout(function (){
								//跳转到实名认证页面
								location.href = ctx + 'h5/realName';
							}, 3000);
						}
						$("#nav_mer_name").text(merchant.merchantCnName);
						$("#nav_mer_phone").text(merchant.phone);
						$("#bankPhone").text(merchant.phone.substr(0,4)+" ***"+merchant.phone.substr(merchant.phone.length-4));
						var level = merchant.level;
						if(level=="1"){
							$("#nav_mer_level").text("免费用户");
						} else if(level=="2"){
							$("#nav_mer_level").text("经理（未激活）");
						} else if(level=="3"){
							$("#nav_mer_level").text("经理");
						}
						//指定头像
						var headImg = re.headImg;
						if(headImg != ""&& headImg !=null){
							$("#head_img").attr('src',headImg);
						}
						$("#cash_mer_name").text(merchant.merchantCnName);
						$("#merchantName").text(merchant.merchantCnName);
						$("#cash_idcard_no").text(merchant.idCardNumber);
						var bankAccount = merchant.bankAccount;
						$("#cashBankAccount").text(bankAccount.substr(0,4)+" ****   ****  "+bankAccount.substr(bankAccount.length-4));
						var idCardNumber = merchant.idCardNumber;
						$("#idcardNumber").text(idCardNumber.substr(0,4)+" ********** "+idCardNumber.substr(idCardNumber.length-4));
						
					} else {
						
					}
				}
			}); 
    		
    		//查询信用卡列表
     	 		$.ajax({
					url : ctx+ "h5/card/list",
					type : "POST",
					success : function(re) {
					if(re.status == "out"){
						//跳转登陆页面
						location.href = ctx + 'h5/login';
					}	
					if (re.status == "SUCCESS") {
						var cardName = re.obj.cardName;
						if(cardName==""||cardName==null){
							$("#cashCardDiv").hide();
							$(".planList_noData").show();
							$("#addLOGO").show();
						} else {
							$("#cashCardDiv").show();
							$("#addLOGO").hide();
							$(".planList_noData").hide();
						}
						var DCImg = re.obj.DCImg;//银行LOGO
						$("#bankName").text(cardName);
						$("#bankLogo").attr("src",DCImg);
						
					} else {
						
					}
				}
			});  
    		
    	})
 </script>
<script type="text/javascript">
mui.init({
	swipeBack:true
})
/*左边导航*/
$(document).on('click','.headerBox_left',function(){
	$('.huiseBox').show();
	$('.leftNavContBox').show();
	$('.headerBox_leftClose').show();
	$('.headerBox_left').hide();
	$("body").attr("style","left:5.48rem;position:fixed;"); 
	$(".headerBox").css('left','5.48rem');   
});
$(document).on('click','.headerBox_leftClose',function(){
	$('.huiseBox').hide();
	$('.leftNavContBox').hide();
	$('.headerBox_leftClose').hide();
	$('.headerBox_left').show();
	$("body").removeAttr("style");   
	$("body").removeAttr("style"); 
	$(".headerBox").css('left','0');   
});
/*添加储蓄卡*/
$(document).on('click','.headerBox_right',function(){
	$('.addCreditCardBg').show();
	$('.addCreditCard').show();
});
/*关闭添加储蓄卡*/
$(document).on('click','.makePlan_selectedCardBox_closeBnt',function(){
	$('.addCreditCardBg').hide();
	$('.addCreditCard').hide();
});
/*复选框样式*/
/*打开新的下载页面窗口*/
$(document).on('click','#uploadBnt',function(){
	window.open("https://fir.im/Katimes");
})
</script>
<script type="text/javascript">
//滚动条到底部加载更多
$(document).scroll(function(){
	if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        var shopIndex_box_listBox = new Array()
        for (a=0;a<20;a++){
        	shopIndex_box_listBox[a] = ''
        }
		for(i=0;i<shopIndex_box_listBox.length;i++){
			$(".quick_cardChoose_list").append(shopIndex_box_listBox[i]);
		}
        
        /*$.ajax({
        	type:"post",
        	url:"",
        	async:true,
			dataType:"json",
			success:function(data){
				for (var i = 0; i < sum; i++) {   
	                result +=	''
	            }
				$('.planList_listBox').append(result);
			},
			error:function(){
				alert('数据有误');
			}
        }); */
	}
});

var submitAddNum=1;//定义的提交绑卡次数
//添加储蓄卡操作
function addCashCard(){
	var isChecked = $('#cash_confim_box').prop('checked');
	if(submitAddNum==3){
		if(!isChecked){
			submitAddNum=2;
		} 
	}
	
	
	var credit_card_no = $.trim($("#cash_bank_account").val());//卡号
	var noLength = credit_card_no.length;
	if(noLength>25 || noLength<10){
		mui.toast("请输入正确的储蓄卡号",{ duration:'long'});
		return;
	}
	var credit_bank_phone =$.trim($("#cash_bank_phone").val()) ;//银行预留手机号
	var length = credit_bank_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(credit_bank_phone)){
		mui.toast("手机号填写错误",{ duration:'long'});
		return;
	}
	
	$.ajax({
		url : ctx +"h5/card/addCashCard",
		dataType : "json",
		type : "POST",
		data:{
			"cardNo":credit_card_no,
			"bankPhone":credit_bank_phone,
			"num":submitAddNum,
		},
		success : function(re) {
			if(re.status=="out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}
			submitAddNum = submitAddNum+1;
			if(submitAddNum==3){
				$("#cash_confim_div").show();
			}
			if(re.status=="SUCCESS"){
				mui.toast(re.msg,{ duration:'long'});
				//返回列表
				setTimeout(function (){
					window.location.reload();
				}, 3000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
				return;
			}
		}
	});
}

</script>
</html>
